<!--
 * @Author: pmy
 * @Date: 2022-08-08 13:21:35
 * @LastEditTime: 2023-10-25 20:59:45
 * @LastEditors: tzq
 * @Description: In User Settings Edit
 * @FilePath: \bdcar-net\src\views\videoMonitoring\historyVideo\historyVideoTree.vue
-->
<template>
  <div v-loading="loading" style="height: calc(100% - 50px);position:relative">
    <el-input size='small' class="filter-input" placeholder="请输入关键字" v-model="filterText" style="margin:10px 0"
      prefix-icon="Search">
    </el-input>
    <div class="tree-body">
      <el-tree v-if="showTree" class="my-tree" :class="{ loadingDisabled: (leftTableLoading) }" :data='treeList'
        :props="defaultProps" node-key="id" :default-expanded-keys="expandedkeys" @node-click="nodeClick"
        :filter-node-method="filterNode" ref="myTree" :expand-on-click-node="false" :highlight-current="true">
        <template #default="{ node, data }">
          <span class="content">
            <!-- 图片 -->
            <img v-if="data.type == '4'" src="@/assets/img/tree/channel.png" style="margin-right: 5px;" />
            <div v-else-if="data.type < '2'" class="node-icon">
              <svg-icon :icon-class="getNodeImg(data)" />
            </div>
            <span v-else :class="{ online: data.online, offline: !data.online }"></span>
            <!-- 文字 -->
            <span v-if="data.type != '4' && data.type != '2'">
              {{ node.label }}(<span style="color: #05b92f;">{{ data.hasVideoCount }}</span>/{{ data.totalCount }})
            </span>
            <span v-else>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<script lang="ts">
import { useData } from "../../../api/tree"
import { ref, nextTick } from "vue"
export default {
  name: "historyVideoTree",
  props: {
    leftTableLoading: {
      type: Boolean,
      default: false
    },
    treeList: Array,
  },
  setup() {
    const defaultProps = ref({
      children: 'children',
      label: 'label',
      isLeaf: 'hasChildren'
    });
    const {
      treeNodeImg,
      carState,
      myTree,
      showTree,
      loading,
      expandedkeys,
      filterText,
      debounce
    } = useData();
    return {
      defaultProps,
      treeNodeImg, // 0:公司 1:部门 2:设备 4:通道
      carState,  // 0:行驶 1:停留 2:熄火 3:定位失败 4:离线 5:未定位 6:在线
      myTree,
      filterText,
      showTree,
      expandedkeys,
      loading,
      debounce
    };
  },
  mounted() { },
  methods: {
    getNodeImg(data) {
      let imgHash = {
        0: "company",
        1: "department",
      }
      if (imgHash[data.type]) {
        return imgHash[data.type]
      }
    },
    filterNode(value, data, node) {
      //element-UI tree树形控件搜索过滤节点，不展示子节点的问题
      if (!value) return true
      let parentNode = node.parent
      let labels = [node.label]
      let level = 1
      while (level < node.level) {
        labels = [...labels, parentNode.label]
        parentNode = parentNode.parent
        level++
      }
      return labels.some(label => label.indexOf(value) !== -1)
    },
    //模糊大小写
    compareOneEqualTwo(prototype, searchStr) {
      var reg = new RegExp(searchStr, "i");
      return (prototype.match(reg) != null);
    },
    nodeClick(data, e) {
      if (this.leftTableLoading) {
        this.myTree.setCurrentKey(this.preActiveNode.id)
        return
      }
      this.preActiveNode = data
      let parent = this.$parent;
      let flag = true;
      do {
        if (parent.oneNodeClick) {
          parent.oneNodeClick(data, e)
          flag = false;
        } else {
          parent = parent.$parent
        }
      } while (flag)
    },
  },
  watch: {
    filterText(val) {
      let _this = this;
      function myFun() {
        // 此处val是string
        if (!!!val) {
          _this.showTree = false
          nextTick(() => {
            _this.showTree = true
          })
        } else {
          _this.myTree.filter(val);
        }
      }
      _this.debounce(myFun);
    },
    treeList() {
      let _this = this;
      this.expandedkeys = this.treeList.map(v => {
        return v.id
      })
      nextTick(() => {
        _this.myTree.filter(_this.filterText);
      })
    }
  },
};
</script>
<style lang='scss' scoped>
.filter-input {
  margin: 10px 0;
  height: 32px;
}

.tree-body {
  height: calc(100% - 52px);
  width: 100%;
  overflow: auto;

  .my-tree {
    font-size: 14px;

    :deep(.is-current) {
      background-color: #e2efff !important;
    }

    :deep(.el-tree-node) {
      min-width: -webkit-max-content;

      >.el-tree-node__children {
        overflow: visible;
      }
    }

    .online {
      width: 6px;
      height: 6px;
      background: #11C79B;
      border-radius: 50%;
      margin-right: 5px;
      min-width: 6px;
      display: inline-block;
    }

    .offline {
      width: 6px;
      height: 6px;
      background: #CDD3CF;
      border-radius: 50%;
      margin-right: 3px;
      min-width: 6px;
      display: inline-block;
    }
  }

  .content {
    display: inline-flex;
    align-items: center;
  }
}
</style>